<template>
  <a-form>
    <div class="setting-table m-2">
      <div class="case-item table-col">
        <div class="label">项目</div>
        <div class="label border-r px-4">代码</div>
        <div class="content border-r px-4">是否质控</div>
        <div class="content px-4">是否评分</div>
      </div>
      <div v-for="item in formState" :key="item.id" class="case-item">
        <div class="label">{{ item.itemName }}</div>
        <div class="label border-r !pr-0 !pl-0">
          <div class="pl-5">{{ item.itemId }}</div>
        </div>

        <div class="content border-r flex !items-center">
          <a-switch v-model:checked="item.qcFlag" />
        </div>
        <div class="content flex !items-center">
          <a-switch v-model:checked="item.scrFlag" />
        </div>
      </div>
    </div>
    <div class="flex justify-end sticky bottom-0 bg-white p-4">
      <a-button type="primary" class="mr-2" @click="onSubmit">保存</a-button>
      <a-button @click="getData()">重置</a-button>
    </div>
    <TemplateModal v-model:open="templateModalOpen" />
  </a-form>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { post } from '@/utils/request'
import { fetchSystemConfig } from '@/utils/systemConfig'

const formState = ref({})
const templateModalOpen = ref(false)

//获取病历信息
const getData = async () => {
  const res = await post('/med/MedicalRecord/getMrItemList', { qcFlag: null, scrFlag: null })
  if (res.code !== 0) return
  formState.value = res.data.map((item) => {
    item.qcFlag = item.qcFlag === 1 ? true : false
    item.scrFlag = item.scrFlag === 1 ? true : false

    return item
  })
}
//保存基本参数
const onSubmit = async () => {
  const formData = formState.value.map((item) => {
    item.qcFlag = item.qcFlag === true ? 1 : 0
    item.scrFlag = item.scrFlag === true ? 1 : 0
    return item
  })
  const res = await post('/med/MedicalRecord/doSaveMrItem', formData)
  if (res.code !== 0) return message.error(res.msg || '保存失败')
  message.success(res.msg)
  getData()
  fetchSystemConfig()
}
onMounted(() => {
  getData()
})
</script>
<style lang="less" scoped>
.setting-table {
  --border-color: rgba(125, 125, 125, 0.16);
  border: 1px solid var(--border-color);
  .table-col {
    div {
      display: flex;
      align-items: center;
      background-color: #fafafa;
    }
  }
  .case-item {
    display: flex;
    .label {
      display: flex;
      align-items: center;
      width: 300px;
      padding: 8px 16px;
      border-right: 1px solid var(--border-color);
      border-bottom: 1px solid var(--border-color);
    }
    .content {
      flex: 1;
      border-bottom: 1px solid var(--border-color);
      :deep(.ant-input) {
        height: 100%;
        border: none;
        border: 1px solid transparent;
        border-radius: 0;
        &:focus {
          background: var(--edit-cell-color);
          border: 1px solid var(--primary-color);
          box-shadow: none;
        }
        &:hover {
          background: var(--bg-color);
          border: 1px solid var(--primary-color);
        }
      }
      :deep(button) {
        margin: 10px 0 0 10px;
      }
      :deep(.ant-radio-group) {
        margin: 10px 0 0 10px;
      }
      :deep(.ant-input-affix-wrapper) {
        height: 100%;
        background: var(--bg-color);
        border: 1px solid transparent;
        border-radius: 0;
        &-focused {
          border: 1px solid var(--primary-color);
          box-shadow: none;
        }
        &:hover {
          background: var(--bg-color);
          border: 1px solid var(--primary-color);
        }
        .ant-input {
          border: none;
        }
      }
    }
    &:last-child {
      .content,
      .label {
        align-items: flex-start;
        border-bottom: none;
      }
    }
  }
}
</style>
